<template>
	<view class="ff-atlas">
		<view class="ff-atlas-content">
			<!-- clip-path: polygon(100% 100%, 0px 100%, 100% 0px); -->
			<view class="ff-atlas-item" v-for="(item, index) in options" :style="[itemStyle(item, index)]">
				<image class="ff-atlas-image" :src="item" mode="widthFix"></image>
			</view>
		</view>
		<view class="ff-atlas-operation" :style="[operationStyle]" @touchstart="pageTouchstart"
			@mousedown="pageTouchstart" @touchend="pageTouchend" @mouseup="pageTouchend" @mouseout="pageTouchend"
			@touchcancel="pageTouchcancel">
			<view class="ff-atlas-left" @click="previous()">
				<ff-icon name="ff-icon-fanhui9" color="#fff" size="60rpx"
					style="padding: 10rpx;background-color: #474747a6;"></ff-icon>
			</view>
			<view class="ff-atlas-right" @click="next()">
				<ff-icon name="ff-icon-fanhui9" color="#fff" rotate="180deg" size="60rpx"
					style="padding: 10rpx;background-color: #474747a6;"></ff-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ff-atlas",
		components: {},
		props: {
			options: {
				type: Array,
				require: true,
				default: undefined
			},
		},
		data() {
			return {
				initY: null,
				oldValue: 0,
				value: 0,
			};
		},
		mounted() {

		},
		computed: {
			operationStyle() {
				let style = {
					'z-index': this.options.length
				}
				return style
			},
		},
		methods: {
			itemStyle(item, index) {
				let style = {
					'z-index': this.options.length - index
				}
				if (this.value === index) {
					style['transition'] = "all 0.5s ease 0s"
					style['transform'] = 'rotateY(180deg)'
				} else if ((this.value - 1) === index) {
					style['transition'] = "all 0.5s ease 0s"
					style['transform'] = 'rotateY(80deg)'
				} else if ((this.value + 1) === index) {
					style['transition'] = "all 0.5s ease 0s"
				}
				if (this.value > (index + 1)) {
					style['display'] = "none"
				}
				if (this.oldValue === this.value && this.value === index) {
					// style['transition'] = "all 0.5s ease 0s"
					// style['transform'] = 'rotateY(100deg)'
				}
				return style
			},
			previous() {
				this.oldValue = this.value
				if (this.value > 0) {
					--this.value
				} else {
					this.value = 0
				}
			},
			next() {
				this.oldValue = this.value
				if (this.value < (this.options.length - 1)) {
					++this.value
				} else {
					this.value = (this.options.length - 1)
				}
			},
			pageTouchstart(e) {
				if (e.type == 'mousedown') {

				} else if (e.type == 'touchstart') {
					if (e.changedTouches.length > 0) {
						this.initY = e.changedTouches[0].pageX
					}
				}
				// console.log("pageTouchstart", e)
			},
			pageTouchend(e) {
				if (this.initY != null) {
					if (e.type == 'touchend') {
						if (e.changedTouches.length > 0) {
							if ((this.initY - e.changedTouches[0].pageX) >= 50) {
								this.next()
							} else if ((this.initY - e.changedTouches[0].pageX) <= -50) {
								this.previous()
							}
						}
					}
					// console.log("pageTouchend", e)
				}
			},
			pageTouchcancel(e) {
				this.initY = null
			},
		}
	}
</script>

<style scoped>
	@import "../../librarys/css/components.css";

	.ff-atlas {
		width: 100%;
		height: 100%;
		position: relative;
		perspective: 2000px;
		transform-style: preserve-3d;
		transform: rotateX(0deg);
		overflow: hidden;
	}

	.ff-atlas-item {
		perspective: 1500px;
		transform-style: preserve-3d;
		position: fixed;
		width: 100%;
		height: 100%;
		left: -100%;
		display: flex;
		align-content: center;
		justify-content: center;
		align-items: center;
		z-index: -1;
		transform-origin: right center;
		transform: rotateY(180deg);
		overflow: hidden;
	}

	.ff-atlas-image {
		width: 100%;
		transform: scaleX(-1);
	}

	.ff-atlas-operation {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	.ff-atlas-left {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.ff-atlas-right {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
</style>